<template>
  <el-drawer
    direction="rtl"
    v-model:visible="isShowDialog"
    @close="handleBtnClick({ type: 'close' })" v-model="isShowDialog" :size="px2vw('842px')">
    <template #header>
      <div class=" font-bold pl-[12px]">明细</div>
    </template>

    <div class="pl-[12px]">

      <div>
        <ContentWrap>
          <SearchBox :queryForm="searchList" :showExpland="false" :show-export="false" @query="handleSearchQuery"/>
        </ContentWrap>
      </div>

      <div class="mt-[24px]">
        <QueryTable
          :list="dataList"
          :total="total"
          @execute="handleBtnClick"
          :thead="th"
          v-model="queryParams"
          :show-action="false"
          :show-section="false"
          :show-expand="false"
          pk="id"
        />

      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleBtnClick({ type: 'close' })">取 消</el-button>
      </div>
    </template>

  </el-drawer>
</template>
<script setup lang="ts">
import {px2vw} from "@/utils";
import QueryTable from "@/components/TableData/index.vue"
import Icon from "@/components/Icon/src/Icon.vue";
import {confirmPromote} from "@/utils";
import type {TradeOrderQueryVO} from "@/api/mall/trade/order";
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";

import {FlowApi} from "@/api/fee/flow";



const props = defineProps({
  modelValue: {
    type: Boolean,
    required: false,
    default: () => false
  },
  info: {
    type: Object,
    required: false,
    default: () => {
    }
  }
})

const searchList: TradeOrderQueryVO[] = [
  {
    label: '消耗日期',
    code: 'timeConsuming',
    type: 'dateRange'
  },
]


const emit = defineEmits(['update:modelValue', 'confirm']);

const isShowDialog = ref(false);

const initQueryParams={
  pageNo: 1, pageSize: 10
}

const queryParams = ref({
 ...initQueryParams
})


const dataList = ref([])
const total = ref(0)
const th = ref([
  {
    name: '原流量（G）',
    code: 'originalTraffic',
    type: 'numberRanger',
    search: true
  },
  {
    name: '变动流量（G）',
    code: 'variableTraffic',
    type: 'numberRanger',
    search: true
  },
  {
    name: '剩余流量（G）',
    code: 'residualFlow',
    type: 'numberRanger',
    search: true
  },
  {
    name: '消耗时间',
    code: 'timeConsuming',
    type: 'numberRanger',
    date: true
  },

])

const handleSearchQuery=(val)=>{
  queryParams.value = {
    ...initQueryParams,
    ...val
  }
  queryList();
}

const handleBtnClick = (e) => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }

}

const fn = {
  pagination(){
    queryList();
  },
  add({index}) {
    dataList.value[index].list.push({
      link: "",
      remark: "",
      isEdit: true
    })
  },
  async delItem({index, idx}) {
    await confirmPromote({
      content: "是否删除该采购链接？"
    })
    dataList.value[index].list.splice(idx, 1);
  },
  close() {

    emit('update:modelValue', false)
  },
  confirm() {
    fn.close();
    emit('confirm', {
      type: 'purchaseConfirm', data: {
        dataList: dataList.value,
        info: props.info
      }
    })
  }
}

const queryList=async()=>{
  let res = await FlowApi.getFlowDetail({
    flowId:props.info.id,
    ...queryParams.value
  })
  dataList.value = res.list;
  total.value = res.total;
}

watch(() => props.modelValue, () => {
  isShowDialog.value = props.modelValue;
  if(props.modelValue){
    queryList();
  }
})

</script>
<style lang="scss" scoped>

</style>
